<template>
    <div>
        <h1>input  fileReader</h1>
        <!-- accept 限制文件上传的类型 -->
        <input type="file" name="" id=""  accept=".md,.jpg,.png" ref="inp" @change="getFiles">
    </div>
</template>

<script>
    export default {
        mounted(){
            console.log(window.FileReader);
        },
        methods:{
            getFiles(){
                console.log(this.$refs.inp.files);
                // 当获取文件后可以通过FileRender的实例将其转换成我们需要的文件类型
                // 文本 DataURL 二进制
                
                // DataURL
                let fr = new FileReader();
                // 通过FileReader实例对象上的readAsDataURL可以将文件读取为DataURL
                fr.readAsDataURL(this.$refs.inp.files[0]);
                fr.onload = function () {
                console.log(fr.result);
                // 变成base64字符串都是以data:开头的字符串
                }; 

                //   md文件变为文本上传服务器 md文件变为文本
                /* fr.readAsText(this.$refs.inp.files[0]);
                fr.onload = () => {
                    console.log(fr.result);
                }; */

                 // md文件变为文本上传服务器 md文件变为二进制文件
                //  fr.readAsBinaryString(this.$refs.inp.files[0]);
                //  fr.onload = () => {
                //     console.log(fr.result);
                // };
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>